<template>
    <view>
        <view class="page">
            <view class="page2">
                <view class="kqxq_h1">储值卡详情</view>
                <view class="kqxq_h2">
                    <view class="kqxq_h2_text">名称</view>
                    <view>开业充送活动</view>
                </view>

                <view class="kqxq_h2">
                    <view class="kqxq_h2_text">使用规则</view>
                    <view>同比例扣除</view>
                </view>

                <view class="kqxq_h2">
                    <view class="kqxq_h2_text">充值余额</view>
                    <view>0元</view>
                </view>

                <view class="kqxq_h2">
                    <view class="kqxq_h2_text">赠送余额</view>
                    <view>0元</view>
                </view>

                <view class="kqxq_h2">
                    <view class="kqxq_h2_text">验证方式</view>
                    <view>无验证</view>
                </view>

                <view class="kqxq_h2">
                    <view class="kqxq_h2_text">有效期</view>
                    <view>不限期</view>
                </view>

                <view class="kqxq_h2">
                    <view class="kqxq_h2_text">可用门店</view>
                </view>

                <view class="cz-xia-kj2">
                    <view class="cz-xia-text2 cz-nei">遇乐共享茶室</view>
                    <view class="cz-xia-kj3">
                        <view class="cz-xia-text2 cz-nei1">参与桌台分类</view>
                        <view class="cz-xia-text1 cz-nei2">大包，中包，小包</view>
                    </view>
                </view>

                <view class="kqxq_h2">
                    <view class="kqxq_h2_text">备注</view>
                    <view></view>
                </view>

                <view class="kqxq_bgjl">变更记录</view>
            </view>
            <view class="kqxq_jl">
                <view class="kqxq_jl_h1">
                    <view>2024-03-19</view>
                    <view>18:06:31</view>
                </view>

                <view class="kqxq_jl_h2">
                    <view>充值金额：</view>
                    <view class="kqxq_jl_text">+1</view>
                </view>

                <view class="kqxq_jl_h2">
                    <view>赠送金额：</view>
                    <view class="kqxq_jl_text">+0元</view>
                </view>

                <view class="kqxq_jl_h2">
                    <view>变动类型：</view>
                    <view class="kqxq_jl_text">取消自助预订订单</view>
                </view>

                <view class="kqxq_jl_h3">
                    <view>单号：</view>
                    <view class="kqxq_jl_text1">202403196489024581</view>
                </view>
            </view>
        </view>

        <view class="di">
            <navigator class="cz-di-k" url="/packageB/chognzhi/chognzhi">
                <view>前往充值</view>
            </navigator>
        </view>
    </view>
</template>

<script>
// pages/chuzhikaxiangqing/chuzhikaxiangqing.js
export default {
    data() {
        return {};
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style>
.page {
    height: 100vh;
    background-color: rgb(247, 247, 247);
}
.page2 {
    padding: 40rpx 40rpx 10rpx 40rpx;
    background-color: rgb(255, 255, 255);
    width: 100%;
}
.kqxq_h1 {
    font-weight: bold; /* 设置字体加粗 */
    font-size: 35rpx;
    height: 100rpx;
}

.kqxq_h2 {
    height: 78rpx;
    display: flex;
}

.kqxq_h2_text {
    color: rgb(128, 128, 128);
    width: 180rpx;
}

.cz-xia-kj2 {
    border-radius: 4rpx; /* 设置边框圆角 */
    border: 1rpx solid rgba(197, 195, 186, 0.5);
    width: 660rpx;
    margin-bottom: 20rpx;
}
.cz-xia-kj3 {
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    height: 100rpx;
    border-bottom: 1rpx solid rgba(197, 195, 186, 0.5);
}

.cz-xia-text1 {
    width: 160rpx;
    color: rgb(165, 162, 151);
}

.cz-nei {
    height: 100rpx;
    border-bottom: 1rpx solid rgba(206, 203, 193, 0.5);
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between;
    align-items: center; /* 垂直居中 */
    padding-left: 20rpx;
}
.cz-nei1 {
    height: 70rpx;
    border-right: 1rpx solid rgba(206, 203, 193, 0.5);
    padding: 30rpx 20rpx 0 20rpx;
}
.cz-nei2 {
    width: 300rpx;
}

.kqxq_bgjl {
    margin-top: 50rpx;
}

.cz-di-k {
    width: 100%;
    height: 100rpx;
    margin: 30rpx 30rpx 30rpx 30rpx;
    background-color: rgb(221, 177, 140); /* 设置输入框背景色为灰色 */
    border-radius: 10rpx; /* 设置边框圆角 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: center;
    align-items: center; /* 垂直居中 */
}

.kqxq_jl {
    padding: 40rpx 0 240rpx 0rpx;

    background-color: rgb(255, 255, 255);
}
.kqxq_jl_h1 {
    display: flex;
    font-size: 28rpx;
    margin-bottom: 40rpx;
    margin-left: 40rpx;
}

.kqxq_jl_h2 {
    display: flex;
    font-size: 28rpx;
    margin-bottom: 20rpx;
    margin-left: 40rpx;
}

.kqxq_jl_h3 {
    display: flex;
    font-size: 28rpx;
    padding-left: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid rgb(219, 217, 217);
}

.kqxq_jl_text {
    color: rgb(206, 20, 20);
}

.kqxq_jl_text1 {
    color: rgb(143, 142, 142);
}
</style>
